<template>
  <view :class="{sticky}">
    <view class="my-search-box"
          :style="{height: height + 'rpx', background}">
      <view class="search"
            v-if="autoRouter"
            :style="{borderRadius: myRadius + 'rpx'}"
            @click="searchClick">
        <view class="search-icon-box">
          <uni-icons class="search-icon"
                     type="search"></uni-icons>
          <view v-if="searchInfo && searchInfo !== ''">
            {{searchInfo}}
          </view>
          <view v-else
                class="search-text">搜索</view>
        </view>
      </view>
      <uni-search-bar class="search-input"
                      v-else
                      :radius="myRadius"
                      :focus="focus"
                      cancelButton="none"
                      @input="$emit('input', $event)">
        <uni-icons class="search-icon"
                   slot="searchIcon"
                   type="search"></uni-icons>
      </uni-search-bar>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-search",
    props: {
      // 搜索框整体高度(rpx)，默认100rpx
      height: {
        type: Number | String,
        default: 100
      },
      // 搜索框圆角(rpx)，为myRadius提供值
      radius: {
        type: Number | String
      },
      // 背景样式
      background: {
        type: String,
        default: '#c00000'
      },
      // 自动跳转，设置为true后，搜索框无法输入，点击会跳转到url指定页面
      autoRouter: {
        type: Boolean,
        default: false
      },
      // 自动跳转的url，仅在autoRouter为true时生效
      url: {
        type: String,
        default: '/subpack/search/search'
      },
      // 是否吸顶
      sticky: {
        type: Boolean,
        default: false
      },
      // 是否获取焦点，仅当autoRouter为false时生效
      focus: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 搜索框默认显示的推荐文字
        searchInfo: ''
      };
    },
    computed: {
      /**
       * 获取radius的值，如果没有传入则为高度的一半，即边为圆形
       */
      myRadius() {
        return this.radius || parseFloat(this.height) / 2
      }
    },
    methods: {
      /**
       * 搜索框点击事件
       */
      searchClick() {
        if (this.autoRouter)
          uni.navigateTo({
            url: this.url
          })
        this.$emit('click')
      }
    }
  }
</script>

<style scoped
       lang="scss">
  /* 条件编译，sticky不同平台具有差异，h5可视区域包括顶部导航，小程序不包括 */
  .sticky {
    position: sticky;
    /* #ifndef H5 */
    top: 0;
    /* #endif */
    /* #ifdef H5*/
    top: calc(44px + env(safe-area-inset-top));
    /* #endif */
    z-index: 10;
  }

  .my-search-box {
    padding: 15rpx;
    box-sizing: border-box;

    .search {
      height: 100%;
      background-color: #fff;
      position: relative;

      .search-icon-box {
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .search-text {
          font-size: 30rpx;
          transform: translateY(-1rpx);
        }
      }
    }

    .search-input {
      padding: 0;
      width: 100%;
      height: 100%;


      /deep/ .uni-searchbar__box {
        height: 100%;

        /deep/ .uni-searchbar__box-search-input {
          height: 100%;
        }

        .uni-input-input,
        .uni-input-placeholder {
          font-size: 30rpx;
          line-height: 30rpx;
        }
      }
    }

    .search-icon {
      font-size: 36rpx !important;
    }
  }
</style>
